<template>
  <div>
    <Form ref="form" :model="formItem" :rules="formItemRules" :label-width="100">
      <FormItem prop="serviceList" label="服务名称">
        <Transfer
          :data="selectUpdateServiceList"
          :target-keys="formItem.serviceList"
          :list-style="{width: '45%',height: '480px'}"
          :titles="['选择服务名称', '已选择服务名称']"
          @on-change="handleTransferChange"
          :render-format="transferRender"
          filterable>
        </Transfer>
      </FormItem>
    </Form>
  </div>
</template>

<script>

export default {
  name: 'ApiUpdate',
  data () {
    return {
      selectUpdateServiceList: [],
      formItem: this.getFormItem(),
      formItemRules: {
        serviceList: [
          { required: true, type: 'array', min: 1, message: '服务名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getFormItem () {
      return {
        serviceList: []
      }
    },
    handleReset () {
      this.$refs['form'].resetFields()
      this.formItem = this.getFormItem()
    },
    handleSubmit () {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http.post(this.$apis.api.batchUpdateService, { serviceIds: this.formItem.serviceList.join(',') }, this).then(res => {
              resolve(res)
            }).catch(function (err) {
              reject(err)
            })
          } else {
            resolve(false)
          }
        })
      })
    },
    setData (data) {
      this.isAdd = true
      this.handleLoadUpdateServiceList()
      this.handleReset()
    },
    handleLoadUpdateServiceList () {
      this.$http.get(this.$apis.api.batchUpdateServiceList, {}, this).then(res => {
        const data = []
        if (res.data) {
          res.data.map(item => {
            data.push({
              key: item.serviceId,
              label: item.serviceId,
              size: item.size
            })
          })
        }
        this.selectUpdateServiceList = data
      })
    },
    handleTransferChange (newTargetKeys, direction, moveKeys) {
      this.formItem.serviceList = newTargetKeys
    },
    transferRender (item) {
      return `<span  title="${item.label}">${item.label}(${item.size})</span>`
    },
    mounted: function () {
    }
  }
}
</script>
